<template>
  <div class="OptCity">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item><span class="fs14 bold">服务城市配置</span></el-breadcrumb-item>
    </el-breadcrumb>

    <div class="common-operate-box">
      <el-table :max-height="this.tableMaxHeight()" :data="tableData" border>
        <el-table-column
          prop="province" label="省份"
          width="160"
          header-align="center" align="center">
        </el-table-column>
        <el-table-column
          prop="city" label="城市"
          header-align="center">
          <template slot-scope="scope">
            <div class="btn-box">
              <BtnAutoSize
                v-for="(item, index) in scope.row.cityList" :key="index"
                class="label-straight mr10 mb10" :class="item.companyRegionId ? 'active' : ''"
                :txt="item.name"
                @click="toggleIsActive(item)"/>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        tableData: [
          // {
          //   province: '广东省',
          //   cityList: [
          //     {companyRegionId: 108, id: 108, name: '南京市', parentId: 10, type: 2}
          //   ]
          // }
        ]
      }
    },
    created () {
      this.ajaxGetData()
    },
    methods: {
      initTree (data) {
        this.tableData = data.reduce((arr, item) => {
          if (item.type === 1) {
            arr.push({...item, province: item.name})
          } else if (item.type === 2) {
            let findPar = arr.find(itemPar => itemPar.id === item.parentId)
            if (findPar) {
              findPar.cityList = findPar.cityList || []
              findPar.cityList.push(item)
            }
          }
          return arr
        }, [])
      },
      async toggleIsActive (item) {
        let isAddNoRight = !item.companyRegionId && !this.findAuth('SYM010010')
        let isDelNoRight = item.companyRegionId && !this.findAuth('SYM010020')
        if (isAddNoRight || isDelNoRight) {
          return
        }

        await this.ajaxToggle(item, !item.companyRegionId ? 'add' : 'del')
        this.ajaxGetData()
      },
      ajaxGetData () {
        this.$axios.post('/api/system/company/region/list')
          .then(res => {
            let resData = res.data.data
            this.initTree(resData)
          })
      },
      ajaxToggle (item, type) {
        let postData = item
        return this.$axios.post(
          type === 'add'
            ? '/api/system/company/region/add'
            : '/api/system/company/region/delete',
          postData
        )
          .then(res => {
            if (res.data.meta.success) {
              this.$message.success(`${type === 'add' ? '添加' : '删除'}操作成功！`)
            }
            return res.data.meta.success
          })
      }
    }
  }
</script>

<style scoped rel="stylesheet/scss" type="text/scss" lang="scss">
  .OptCity {

  }

  .btn-box {
    margin-bottom: -10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
</style>
